<template>
	<!-- 单位信息 -->
	<div class="Unit_Information" style="margin-top: 10px">
		<HyCard title="单位信息">
			<Unit :message="detailInfos?.info" />
		</HyCard>
	</div>
	<!-- 设计单位信息 -->
	<div class="Unit_Information">
		<HyCard title="设计单位信息">
			<UnitSet :message="detailInfos?.info" />
		</HyCard>
	</div>
	<!-- 应用信息 -->
	<div class="Unit_Information">
		<HyCard title="应用信息">
			<UnitInfor :messages="detailInfos?.info" />
		</HyCard>
	</div>
	<!-- 全口径编目 -->
	<div>
		<UniCaliber :message="detailInfos?.info" />
	</div>
	<!-- 附件 -->
	<div class="detaAnnex mb-10">
		<detaAnnex :message="detailInfos?.info" />
	</div>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, onMounted, toRefs, defineProps, watch } from 'vue';
import Unit from './components/unit.vue';
import HyCard from './components/Card.vue';
import UnitSet from './components/unitSet.vue';
import UnitInfor from './components/unitInfor.vue';
import UniCaliber from './components/uniCaliber.vue';
import detaAnnex from './components/detaAnnex.vue';
const props = defineProps({
	detailInfo: Object,
});
const detailInfos: any = ref({});
watch(
	() => props.detailInfo,
	(val, old) => {
		detailInfos.value = val;
	},
	{
		deep: true,
		immediate: true,
	}
);

const { detailInfo } = toRefs(props);
</script>

<style lang="scss" scoped>
.Unit_Information {
	margin-bottom: 10px;
}
</style>
